{% extends "base.html" %}

{% block title %}XBot管理后台 - 个人资料{% endblock %}

{% block page_title_icon %}<i class="bi bi-person-circle page-title-icon"></i>{% endblock %}
{% block page_title %}个人资料{% endblock %}

{% block content %}
<div class="row">
    <!-- 个人信息卡片 -->
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="avatar-lg mb-3 mx-auto">
                    <span class="rounded-circle bg-primary text-white d-flex justify-content-center align-items-center" style="width: 96px; height: 96px; font-size: 36px;">
                        <span id="userInitial">{{ current_user.username[0]|upper }}</span>
                    </span>
                </div>
                <h5 class="card-title" id="profileUsername">{{ current_user.username }}</h5>
                <p class="text-muted mb-2" id="profileRole">管理员</p>
                <p class="mb-4">
                    <span class="badge bg-success" id="profileStatus">已启用</span>
                </p>
                <div class="d-grid">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                        <i class="bi bi-key me-2"></i> 修改密码
                    </button>
                </div>
            </div>
            <div class="card-footer text-muted">
                <small>账户创建于：<span id="profileCreatedAt">2023-01-01</span></small>
            </div>
        </div>
    </div>
    
    <!-- 账户设置卡片 -->
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">账户设置</h5>
            </div>
            <div class="card-body">
                <form id="profileForm">
                    <div class="mb-3">
                        <label for="profileNickname" class="form-label">显示名称</label>
                        <input type="text" class="form-control" id="profileNickname" placeholder="请输入您的显示名称">
                        <div class="form-text">此名称将显示在界面上，而不是您的登录用户名</div>
                    </div>
                    <div class="mb-3">
                        <label for="profileEmail" class="form-label">电子邮件</label>
                        <input type="email" class="form-control" id="profileEmail" placeholder="请输入您的电子邮件">
                        <div class="form-text">用于接收通知和找回密码</div>
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="profileEmailNotifications" checked>
                        <label class="form-check-label" for="profileEmailNotifications">接收电子邮件通知</label>
                        <div class="form-text">接收重要的系统通知和提醒</div>
                    </div>
                    <div class="mb-3">
                        <label for="profileTheme" class="form-label">界面主题</label>
                        <select class="form-select" id="profileTheme">
                            <option value="light">浅色主题</option>
                            <option value="dark">深色主题</option>
                            <option value="system">跟随系统</option>
                        </select>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" id="saveProfileBtn">
                            <i class="bi bi-save me-1"></i> 保存设置
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 登录历史卡片 -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">登录历史</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>登录时间</th>
                                <th>IP 地址</th>
                                <th>设备</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="loginHistoryBody">
                            <tr>
                                <td>2024-07-05 18:30:15</td>
                                <td>127.0.0.1</td>
                                <td>Chrome 115.0.5790.171 / Windows</td>
                                <td><span class="badge bg-success">成功</span></td>
                            </tr>
                            <tr>
                                <td>2024-07-04 14:22:36</td>
                                <td>127.0.0.1</td>
                                <td>Chrome 115.0.5790.171 / Windows</td>
                                <td><span class="badge bg-success">成功</span></td>
                            </tr>
                            <tr>
                                <td>2024-07-03 09:15:47</td>
                                <td>127.0.0.1</td>
                                <td>Chrome 115.0.5790.171 / Windows</td>
                                <td><span class="badge bg-success">成功</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="changePasswordForm">
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label">当前密码</label>
                        <input type="password" class="form-control" id="currentPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required>
                        <div class="form-text">密码应包含至少8个字符，包括数字、大小写字母和特殊字符</div>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="changePasswordBtn">保存更改</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 加载个人资料
    loadProfile();
    
    // 绑定事件
    document.getElementById('saveProfileBtn').addEventListener('click', saveProfile);
    document.getElementById('changePasswordBtn').addEventListener('click', changePassword);
});

// 加载个人资料
async function loadProfile() {
    try {
        // 这里模拟加载个人资料数据
        // 在实际项目中，应该从服务器获取数据
        
        // 设置个人信息
        document.getElementById('profileUsername').textContent = '{{ current_user.username }}';
        document.getElementById('userInitial').textContent = '{{ current_user.username[0]|upper }}';
        document.getElementById('profileRole').textContent = '管理员';
        document.getElementById('profileStatus').textContent = '已启用';
        document.getElementById('profileCreatedAt').textContent = '2023-01-01';
        
        // 设置表单数据
        document.getElementById('profileNickname').value = '{{ current_user.username }}';
        document.getElementById('profileEmail').value = 'user@example.com';
        document.getElementById('profileEmailNotifications').checked = true;
        document.getElementById('profileTheme').value = 'light';
        
    } catch (error) {
        console.error('加载个人资料失败:', error);
        showAlert('danger', `加载失败: ${error.message || '网络错误'}`);
    }
}

// 保存个人资料
async function saveProfile() {
    const nickname = document.getElementById('profileNickname').value;
    const email = document.getElementById('profileEmail').value;
    const emailNotifications = document.getElementById('profileEmailNotifications').checked;
    const theme = document.getElementById('profileTheme').value;
    
    try {
        // 这里模拟保存个人资料
        // 在实际项目中，应该将数据发送到服务器
        
        console.log('保存个人资料:', {
            nickname,
            email,
            emailNotifications,
            theme
        });
        
        showAlert('success', '个人资料已更新');
        
    } catch (error) {
        console.error('保存个人资料失败:', error);
        showAlert('danger', `保存失败: ${error.message || '网络错误'}`);
    }
}

// 修改密码
async function changePassword() {
    const currentPassword = document.getElementById('currentPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    
    // 验证
    if (!currentPassword || !newPassword || !confirmPassword) {
        showAlert('warning', '请填写所有密码字段');
        return;
    }
    
    if (newPassword !== confirmPassword) {
        showAlert('warning', '两次输入的新密码不一致');
        return;
    }
    
    if (newPassword.length < 8) {
        showAlert('warning', '新密码长度应至少为8个字符');
        return;
    }
    
    try {
        // 这里模拟修改密码
        // 在实际项目中，应该将数据发送到服务器
        
        console.log('修改密码:', {
            currentPassword,
            newPassword
        });
        
        // 关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('changePasswordModal'));
        modal.hide();
        
        // 清空表单
        document.getElementById('currentPassword').value = '';
        document.getElementById('newPassword').value = '';
        document.getElementById('confirmPassword').value = '';
        
        showAlert('success', '密码已成功更新');
        
    } catch (error) {
        console.error('修改密码失败:', error);
        showAlert('danger', `修改失败: ${error.message || '网络错误'}`);
    }
}

// 显示提醒消息
function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.role = 'alert';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    document.querySelector('.content-container').insertBefore(alertDiv, document.querySelector('.content-container').firstChild);
    
    // 3秒后自动关闭
    setTimeout(() => {
        const bsAlert = new bootstrap.Alert(alertDiv);
        bsAlert.close();
    }, 3000);
}
</script>
{% endblock %} 